<!-- 专题页面 -->
<template>
    <view class="">
        <!-- 搜索组件 -->
        <search></search>
        <!-- 顶部加载布局 -->
        <view class="box-loading" v-show="!subjects.length">
            <uni-load-more status="loading"></uni-load-more>
        </view>
        <!-- 专题布局 -->
        <view class="box-subject box-grid-3">
            <!-- 专题组件 -->
            <subject v-for="item in subjects" :key="item._id" :data="item"></subject>
        </view>
        <!-- 底部加载布局 -->
        <view class="box-loading" v-show="subjects.length || isNoData">
            <uni-load-more :status="isNoData ? 'noMore' : 'loading'"></uni-load-more>
        </view>
    </view>
</template>

<script lang="ts" setup>
    //导入
    import { ref } from "vue";
    import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
    import { api_getSubject } from "@/api/api.ts";

    //参数
    let subjects = ref([]);
    let pageParam = ref({ pageNum: 1, pageSize: 12 });
    let isNoData = ref(false);

    //初始方法执行
    getSubject();

    //内部事件
    //重置查询页码
    function init() {
        pageParam.value = { pageNum: 1, pageSize: 12 };
        isNoData.value = false;
    };

    //页面生命周期
    //触底加载更多
    onReachBottom(() => {
        //不存在新数据时，不再进行查询
        if (isNoData.value) {
            return;
        }
        pageParam.value.pageNum++;
        getSubject();
    });
    //下拉刷新
    onPullDownRefresh(() => {
        //清空数据
        subjects.value = [];
        init();
        getSubject().finally(() => {
            uni.stopPullDownRefresh();
        });
    });

    //网络请求
    //获取专题
    async function getSubject() {
        let res : any = await api_getSubject({
            pageNum: pageParam.value.pageNum,
            pageSize: pageParam.value.pageSize
        });
        if (pageParam.value.pageSize > res.data.length) {
            isNoData.value = true;
        };
        subjects.value = [...subjects.value, ...res.data];
    };
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-subject {
        padding: 30rpx;
    }
</style>